<template>
  <div class="map-view">
    <div id="main"></div>
  </div>
</template>

<script>
import geoJson from '@/assets/data.json'
import { travelMap } from '@/api/api'

export default {

  data () {
    return {
    }
  },
  created () {
    travelMap().then(res => {
      if (res.data.status === 200) {
        let { points, linesData } = res.data.data
        console.log(points, linesData)
        this.draw(points, linesData)
      }
    }).catch(error => {
      throw error
    })
  },
  methods: {
    draw (points, linesData) {
      let myChart = this.$echarts.init(document.getElementById('main'))
      // 注册可用地图
      this.$echarts.registerMap('china', geoJson)
      let option = {
        backgroundColor: 'rgba(178, 200, 187, 0.7)',
        geo: {
          map: 'china',
          // 地图长宽比
          aspectScale: 0.75,
          zoom: 1.1,
          regions: [{
            name: '南海诸岛'
          }],
          itemStyle: {
            normal: {
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(182, 194, 154)'
                  }, {
                    offset: 1,
                    color: 'rgb(138, 151, 123)'
                  }
                ]
              },
              shadowOffsetX: 10,
              shadowOffsetY: 10,
              shadowColor: 'rgba(101, 102, 103, 0.6)',
              shadowBlur: 7,
            },
            zlevel: -1
          }
        },
        series: [
          // 配置地图相关参数
          {
            type: 'map',
            zoom: 1.1,
            map: 'china',
            label: {
              normal: {
                show: true,
                color: '#fff',
                position: 'top',
              }
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgb(131, 178, 76)'
                    }, {
                      offset: 1,
                      color: 'rgb(131, 200, 100)'
                    }
                  ],
                  globalCoord: true
                }
              }
            }
          },
          // 配置散点图
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            symbolSize: 10,
            zlevel: 1,
            data: points
          },
          // 配置线路动画
          {
            type: 'lines',
            zleve: 2,
            effect: {
              show: true,
              period: 4,
              symbol: 'arrow',
              symbolSize: 6,
              trailLength: 0.1
            },
            lineStyle: {
              normal: {
                width: 2,
                opacity: 0.4,
                curveness: 0.2,
              }
            },
            data: linesData
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less">
.map-view {
  width: 100%;
  #main {
    width: 100%;
    height: 600px;
    text-align: center;
  }
}
</style>